/**********
@name: input单行文本组件
@describtion: props: title:字段别名,value:字段值
@author:liubingye
@date:2023-02-10 10:29:07
***********/
<template>
  <div class="video-outer-box">
    <el-form-item class="text-form-item" :label="props.title" :props="props.field">
      <el-input
          v-model="inputVal"
          :placeholder="props.placeholder"
      ></el-input>
      <el-button type="primary" text @click="showVideoUpload = true">上传视频</el-button>
    </el-form-item>
  </div>
  <VideoUpload v-model:showDialog="showVideoUpload" @getVideo="insertVideo" :limit="1" :insert-fun="'insertVideo1'"></VideoUpload>
</template>

<script setup>
import { computed, ref } from "vue";

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  value: {
    type: String,
    default: ''
  },
  placeholder: {
    type: String,
    default: ''
  },
  field: {
    type: String,
    default: ''
  }
})
const showVideoUpload = ref(false)
const emits = defineEmits(['update:value','getChildrenValue'])
const inputVal = computed({
  get: () => props.value,
  set: (val) => {
    emits('update:value',val)
  }
})
const insertVideo = (videoList) => {
  console.log('videoList',videoList);
  inputVal.value = videoList[0].url
}

</script>

<style scoped lang="scss">
.video-outer-box{
  height: 56px;
  box-sizing: border-box;
  border-bottom: 1px solid #E4E4E4;
  display: flex;
  align-items: center;
  .text-form-item .el-input{
    flex: 1;
  }
  ::v-deep(.el-form-item){
    margin-bottom: 0;
    width: 100%;
  }
  ::v-deep(.el-input__wrapper){
    box-shadow: none;
  }
}
</style>
